<template>
	<div>

			<div class="flex-container row" style="width: 100%;">
				  <el-card style="width: 70%">
				     <template #header>
				       <div class="card-header">
				         <span>{{shop.name ?? '暂无店铺'}} <el-tag type="success">专业版</el-tag></span>
				       </div>
				     </template>
				     <p>
						 开通时间：{{shop.kai_time ?? '暂无'}}<span style="margin-left: 15px;">到期时间：{{shop.end_time ?? '暂无'}}</span>
					 </p>
					<p>
						 最后登录：{{admin.login_time}}<span style="margin-left: 15px;">登录次数：{{admin.login_num}}</span>

					</p>
				   </el-card>
				   <el-card style="width:29.5%;margin-left: 0.5%;">
				      <template #header>
				        <div class="card-header">
				          <span>系统通知</span>
				        </div>
				      </template>
				      <div v-for="(o,index) in notice" :key="index" class="notice_box" id="notice_a">
					    <div class="notice_left"><a href="javascript:;" @click="seeNotice(index)">{{ o.title }}</a></div>
						<div class="notice_right">{{o.pub_time}}</div>
					  </div>

				    </el-card>
			</div>

			<div class="flex-container row" style="width: 100%;">
				  <el-card style="width: 70%">
				      <div>
						<el-row :gutter="20">
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel user-reg suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="user_reg_number" style="color:#9933FF">{{ tong.order_sum??0 }}</span>
						                        <div class="content-right">订单数量</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel file suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="file_number2" style="color:#FF33CC"><b style="font-size: 8px;">¥</b>{{ tong.order_sum_money??0 }}</span>
						                        <div class="content-right">订单金额</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>

						        <el-col :sm="12" :lg="3">
						            <div class="small-panel addons suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="addons_number" style="color:#00CC00">{{ tong.user_sum_pay??0 }}</span>
						                        <div class="content-right">付款总人数</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel user-reg suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="user_reg_number" style="color:#CCCC00">{{ tong.user_sum  ?? 0}}</span>
						                        <div class="content-right">总用户</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel file suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="file_number" style="color:#FF9900">{{ tong.order_daifa??0 }}</span>
						                        <div class="content-right">待发货订单</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel file suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="file_number" style="color:#FF9900">{{ tong.order_success??0 }}</span>
						                        <div class="content-right">交易完成订单</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel users suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span id="users_number" style="color:#009999">{{ tong.order_tui??0 }}</span>
						                        <div class="content-right">申请退款订单</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>
						        <el-col :sm="12" :lg="3">
						            <div class="small-panel addons suspension">
						                <div class="small-panel-content">
						                    <div class="content-left">

						                        <span ref="myDiv" id="addons_number" style="color:#996600;" :class="{ 'firstClass': true, 'secondClass': isWidthExceeded }">{{ tong.order_tuied ?? 0 }}</span>
						                        <div class="content-right">已退款订单</div>
						                    </div>

						                </div>
						            </div>
						        </el-col>

						    </el-row>
					  </div>
				   </el-card>
				   <el-card style="width:29.5%;margin-left: 0.5%;padding-bottom: 15px;">
				      <template #header>
				        <div class="card-header">
				          <span>快捷入口</span>
				        </div>
				      </template>
				      <div>
						  <div class="kuai" @click="go('order/lists')">
								<svg t="1728569073988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" width="35" height="35"><path d="M510.1056 510.72m-457.984 0a457.984 457.984 0 1 0 915.968 0 457.984 457.984 0 1 0-915.968 0Z" fill="#E3FFFC" p-id="1009"></path><path d="M668.672 771.072H351.5392a77.5168 77.5168 0 0 1-77.4656-77.4656V330.3936A77.5168 77.5168 0 0 1 351.5392 252.928h274.8928l119.7056 118.272v322.56a77.5168 77.5168 0 0 1-77.4656 77.312z" fill="#16D0AF" p-id="1010"></path><path d="M626.432 252.928v94.5152a26.1632 26.1632 0 0 0 26.112 26.112h93.5936v-2.3552z" fill="#ADF0EA" p-id="1011"></path><path d="M607.8976 547.84H399.36a25.6 25.6 0 0 1 0-51.2h208.5376a25.6 25.6 0 0 1 0 51.2zM607.8976 683.6736H399.36a25.6 25.6 0 0 1 0-51.2h208.5376a25.6 25.6 0 0 1 0 51.2zM517.7856 411.9552H399.36a25.6 25.6 0 0 1 0-51.2h118.4256a25.6 25.6 0 1 1 0 51.2z" fill="#FFFFFF" p-id="1012"></path></svg>
								<p>订单管理</p>
						  </div>
						  <div class="kuai" @click="go('goods/index')">
							<svg t="1728568928544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1050" width="35" height="35"><path d="M513.28 509.696m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#FFE3DB" p-id="1051"></path><path d="M794.7264 704.2048L771.2768 307.2a67.7376 67.7376 0 0 0-67.584-63.744H322.816A67.7376 67.7376 0 0 0 255.232 307.2l-23.3984 396.9536a67.6864 67.6864 0 0 0 67.584 71.68H727.04a67.6864 67.6864 0 0 0 67.6864-71.6288zM690.5856 414.72c-8.3456 92.672-84.2752 165.4272-176.4864 165.4272s-167.2192-71.68-176.3328-163.84a39.68 39.68 0 0 1-14.0288-30.72 37.9392 37.9392 0 1 1 75.8784 0 39.8848 39.8848 0 0 1-9.6256 26.112c6.8608 65.024 59.904 115.7632 124.1088 115.7632s116.3264-49.8688 123.9552-114.0736a39.7824 39.7824 0 0 1-11.1616-27.8016 37.9904 37.9904 0 1 1 75.9296 0 39.6288 39.6288 0 0 1-12.2368 29.1328z" fill="#F23D4F" p-id="1052"></path><path d="M771.2768 307.2a67.7376 67.7376 0 0 0-67.584-63.744H322.816A67.7376 67.7376 0 0 0 255.232 307.2l-23.3984 396.9536a67.6864 67.6864 0 0 0 67.584 71.68h224.8192a451.84 451.84 0 0 0 257.1264-297.984z m-80.6912 107.52c-8.3456 92.672-84.2752 165.4272-176.4864 165.4272s-167.2192-71.68-176.3328-163.84a39.68 39.68 0 0 1-14.0288-30.72 37.9392 37.9392 0 1 1 75.8784 0 39.8848 39.8848 0 0 1-9.6256 26.112c6.8608 65.024 59.904 115.7632 124.1088 115.7632s116.3264-49.8688 123.9552-114.0736a39.7824 39.7824 0 0 1-11.1616-27.8016 37.9904 37.9904 0 1 1 75.9296 0 39.6288 39.6288 0 0 1-12.2368 29.1328z" fill="#FC4956" p-id="1053"></path><path d="M474.6752 575.3856A181.1968 181.1968 0 0 1 337.92 416.2048a39.68 39.68 0 0 1-14.0288-30.72 37.9392 37.9392 0 1 1 75.8784 0 39.8848 39.8848 0 0 1-9.6256 26.112C397.0048 476.6208 450.048 527.36 514.2528 527.36a117.76 117.76 0 0 0 21.8112-2.048 451.4816 451.4816 0 0 0 92.672-128 41.7792 41.7792 0 0 1-1.6896-11.6736 39.424 39.424 0 0 1 21.0432-35.1232 445.1328 445.1328 0 0 0 23.2448-107.1104h-348.16A67.7376 67.7376 0 0 0 255.232 307.2l-20.48 345.1392a448.3584 448.3584 0 0 0 239.9232-76.9536z" fill="#FF5C64" p-id="1054"></path><path d="M339.6096 429.568q-1.1264-6.6048-1.8432-13.3632a39.68 39.68 0 0 1-14.0288-30.72 37.9392 37.9392 0 1 1 75.8784 0 7.5776 7.5776 0 0 1 0 1.0752 452.5568 452.5568 0 0 0 112.64-143.36h-189.44A67.7376 67.7376 0 0 0 255.232 307.2L245.76 471.9616a445.696 445.696 0 0 0 93.8496-42.3936z" fill="#FF716E" p-id="1055"></path></svg>
						     <p>商品管理</p>
						  </div>
						  <div class="kuai" @click="go('user/user')">
						  		<svg t="1728569155818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1162" width="35" height="35"><path d="M512 512m-457.984 0a457.984 457.984 0 1 0 915.968 0 457.984 457.984 0 1 0-915.968 0Z" fill="#FFF1F0" p-id="1163"></path><path d="M294.144 539.8016l375.6544 208.9984a41.6256 41.6256 0 0 0 61.8496-36.4032V343.296a73.3696 73.3696 0 0 0-73.4208-73.3696H367.5136a73.3184 73.3184 0 0 0-73.3696 73.3696z" fill="#FFA4A4" p-id="1164"></path><path d="M731.648 539.8016l-375.6544 208.9984a41.6256 41.6256 0 0 1-61.8496-36.4032V343.296a73.3184 73.3184 0 0 1 73.3696-73.3696h290.7136a73.3696 73.3696 0 0 1 73.4208 73.3696z" fill="#F65856" p-id="1165"></path><path d="M523.9808 359.9872l20.48 41.728a12.4416 12.4416 0 0 0 9.3184 6.7584l46.08 6.656a12.3904 12.3904 0 0 1 6.8608 21.1456l-33.28 32.4096a12.3392 12.3392 0 0 0-3.5328 10.9568l7.8336 45.824a12.3904 12.3904 0 0 1-17.9712 13.056l-40.96-21.6064a12.3904 12.3904 0 0 0-11.52 0l-40.96 21.6064a12.3904 12.3904 0 0 1-17.9712-13.056L455.68 479.6416a12.4928 12.4928 0 0 0-3.584-10.9568l-33.28-32.4096a12.3904 12.3904 0 0 1 6.8608-21.1456l46.08-6.656A12.4928 12.4928 0 0 0 481.28 401.7152l20.48-41.728a12.3904 12.3904 0 0 1 22.2208 0z" fill="#FFFFFF" p-id="1166"></path></svg>
						  	   <p>用户管理</p>
						  </div>
						  <div class="kuai" @click="go('static/order')">
						  		 <svg t="1728569204222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1318" width="35" height="35"><path d="M511.1296 512m-457.984 0a457.984 457.984 0 1 0 915.968 0 457.984 457.984 0 1 0-915.968 0Z" fill="#EBFAFF" p-id="1319"></path><path d="M275.9168 288.6144m63.1296 0l344.1664 0q63.1296 0 63.1296 63.1296l0 239.5136q0 63.1296-63.1296 63.1296l-344.1664 0q-63.1296 0-63.1296-63.1296l0-239.5136q0-63.1296 63.1296-63.1296Z" fill="#059DFF" p-id="1320"></path><path d="M511.1296 356.4544a115.0464 115.0464 0 1 0 115.0464 115.0464 115.0464 115.0464 0 0 0-115.0464-115.0464z m-25.6 129.4336a39.7824 39.7824 0 1 1 39.7824-39.7312 39.7312 39.7312 0 0 1-39.5264 39.7312z" fill="#FFFFFF" p-id="1321"></path><path d="M672.3584 740.4032H357.2224a24.1152 24.1152 0 1 1 0-48.1792h315.136a24.1152 24.1152 0 1 1 0 48.1792z" fill="#97D8FF" p-id="1322"></path></svg>
						  		<p>数据统计</p>
						  </div>
						  <div class="kuai" @click="go('system/store_setting')">
						  		<svg t="1728569239776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1472" width="35" height="35"><path d="M512 510.72m-457.984 0a457.984 457.984 0 1 0 915.968 0 457.984 457.984 0 1 0-915.968 0Z" fill="#EBFAFF" p-id="1473"></path><path d="M297.5232 253.696m101.9392 0l273.2544 0q101.9392 0 101.9392 101.9392l0 319.8464q0 101.9392-101.9392 101.9392l-273.2544 0q-101.9392 0-101.9392-101.9392l0-319.8464q0-101.9392 101.9392-101.9392Z" fill="#059DFF" p-id="1474"></path><path d="M345.088 406.9376H266.7008a32.3072 32.3072 0 1 1 0-64.5632H345.088a32.3072 32.3072 0 1 1 0 64.5632zM345.088 547.84H266.7008a32.3072 32.3072 0 0 1 0-64.6144H345.088a32.3072 32.3072 0 0 1 0 64.6144zM345.088 688.1792H266.7008a32.3072 32.3072 0 0 1 0-64.6144H345.088a32.3072 32.3072 0 0 1 0 64.6144z" fill="#97D8FF" p-id="1475"></path><path d="M668.1088 414.0032l-33.792-26.9824a17.92 17.92 0 0 0-25.1392 2.5088l-127.6416 152.7296a18.5344 18.5344 0 0 0-3.7888 7.7312l-10.24 45.1072a18.2784 18.2784 0 0 0 6.2464 18.176 17.9712 17.9712 0 0 0 15.36 3.7888 20.48 20.48 0 0 0 3.5328-1.1776l46.7456-20.9408a18.2272 18.2272 0 0 0 6.5024-5.12L670.72 440.0128a18.0224 18.0224 0 0 0 4.096-13.568 18.2784 18.2784 0 0 0-6.7072-12.4416z" fill="#FFFFFF" p-id="1476"></path></svg>
						  		 <p>系统设置</p>
						  </div>

					  </div>
				    </el-card>
			</div>

			<div class="flex-container row" style="width: 100%;">
				<el-card style="width: 100%">
					<div>
						<div id='showorders_sale' style='width:49%; height:450px;float: left;'></div>
						<div id='showorders_month' style='width:49%; height:450px;float: right;'></div>
					</div>
				</el-card>

			</div>

			<el-dialog  v-model="show" title="通知详细">
					<div style="min-height: 400px;">
						 <h2 style="margin-bottom: 10px;">{{notice_details.title}}</h2>
						 <p>
							 {{notice_details.content}}
						 </p>
					</div>
			</el-dialog>



	</div>
</template>
<script>

	import * as echarts from 'echarts';
	export default {
		name: "dashboard",
		components: {
		   echarts
		},
		data(){
			return {
				 tong:[],
				 notice:[],
				 month_sales:[],
				 notice_details:{},
				 show:false,
				 shop:{},
				 admin:{}
			}
		},
		created(){

			//this.updateScreenWidth();
			//window.addEventListener('resize', this.updateScreenWidth);
		},
		mounted(){
		   this.getdata()
		   this.getNotice()
		   this.getShop()
		},
		methods: {
			seeNotice(dex){
				this.show = true
			   this.notice_details = this.notice[dex]
			},
			go(url){
					this.$router.push(url)
			},
			async getShop(){
				var res = await this.$API.system.universal.list.get({},'/system/store_info');
				if(res.code == 200){
					 this.shop = res.data.shop
					 this.admin = res.data.admin
				}
			},
			 async getNotice(){
				var res = await this.$API.system.universal.list.get({'nopage':1,'limit':2},'/system/notifications');
				if(res.code == 200){
					 this.notice = res.data
				}
			 },
			 echart(v = []){
			 	    // 基于准备好的dom，初始化echarts实例
			 	    var chartDom = document.getElementById('showorders_sale');
			 	    var myChart = echarts.init(chartDom);
			 	    // 指定图表的配置项和数据
			 	    var option;
			 	    option = {
			 	        tooltip: {
			 	            trigger: 'axis'
			 	        },
			 	        legend: {
			 	            data: ['订单量', '订单额']
			 	        },
			 	        grid: {
			 	            left: '3%',
			 	            right: '4%',
			 	            bottom: '3%',
			 	            containLabel: true
			 	        },
			 	        toolbox: {
			 	            feature: {
			 	                saveAsImage: {}
			 	            }
			 	        },
			 	        xAxis: {
			 	            type: 'category',
			 	            boundaryGap: false,
			 	            data: v.date,
			 	            //设置字体倾斜
			 	            axisLabel: {
			 	                interval: 0,
			 	                rotate: 0,
			 	                //倾斜度 -90 至 90 默认为0
			 	                // margin: 9,
			 	                textStyle: {
			 	                    color: "#666",
			 	                    size:"10px"
			 	                }
			 	            }
			 	        },
			 	        yAxis: {
			 	            type: 'value'
			 	        },
			 	        series: [

			 	            {
			 	                name: '订单金额',
			 	                type: 'line',
			 	                stack: 'Total',
			 	                data:v.money
			 	            }
			 	        ]
			 	    };


			 	    option && myChart.setOption(option);
			 },
			 echart_month(){
			 	    // 基于准备好的dom，初始化echarts实例
			 	    var chartDom = document.getElementById('showorders_month');
			 	    var myChart = echarts.init(chartDom);
			 	    // 指定图表的配置项和数据
			 	    var option;
			 	    option = {
			 	        tooltip: {
			 	            trigger: 'axis'
			 	        },
			 	        legend: {
			 	            data: ['销售额']
			 	        },
			 	        xAxis: {
			 	            type: 'category',
			 	            data: this.month_sales['month']
			 	        },
			 	        yAxis: {
			 	            type: 'value'
			 	        },
			 	        series: [
			 	            {
			 	            data: this.month_sales['money'],
			 	            type: 'bar',
			 	            name:'销售额'
			 	            }
			 	        ]
			 	    };


			 	    option && myChart.setOption(option);
			 },
			 async getdata(){
			 	var res = await this.$API.system.universal.handle.post({'day':7},'/order/statics');
			 	if(res.code == 200){
			 		 this.tong = res.data
					 this.month_sales = res.month_sales
			 		 this.echart(res.latest_day)
			 		 this.echart_month()
			 		// this.echart_os()
			 	}else{
			 		this.$alert(res.message, "提示", {type: 'error'})
			 	}
			 },

			 refresh(){
			     this.$refs.table.reload()
			 }
		}
	}
</script>

<style scoped lang="scss">
#notice_a a:hover{
	text-decoration: underline;
	color:#409EFF
}
.notice_box{
	margin-top: 7px;
	float: left;
	width: 100%;
}
.notice_left{
	width: 75%;
	float: left;
	white-space: nowrap; /* 确保文本在一行内不换行 */
	overflow: hidden; /* 隐藏超出容器宽度的文本 */
	text-overflow: ellipsis; /* 在文本被修剪的地方显示省略号 */
}
.notice_right{
	width: 24%;
	text-align: right;
	float: right;
	color:#999
}
.kuai{
  width: 20%;
  float: left;
  text-align: center;
  color:#888;
  cursor: pointer;
  .kuai_img{
	 width: 30px;
	 height: 30px;
  }
}
.xuancai_right{
	.xuancai{
		width: 140px;
		height: 280px;
		float: left;
		margin-left: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

	}
	.addnum{
		padding-left: 6px;
		padding-right: 6px;
		margin-top: 8px;
	}
	.addbtn{
		width: 100%;
		margin-top: 10px
	}
}
.xuancai_left{
	width: 120px;
	float: left;
	height: 62vh;
	background-color: #fff;
	border-radius: 8px;
	a{
		display: block;
		width:100%;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: 10px;
		padding-left: 4px;
		padding-right: 4px;
	}
	a:hover{
		background-color: #99CCFF;
		color:#fff;
	}
	.nav_on{
		background-color: #99CCFF;
		color:#fff;
	}
}
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    width:100%;
    height: 100%;
    padding: 3px 7px;
    box-sizing: border-box;
  }
.flex-container p{
	font-size: 13px;
	line-height: 22px;
}
  .flex-item {
    width: 205px;
    height: 150px;
    margin: 5px;
    /* background-color: lightblue;   */
    text-align: center;
    color: #333;
	background-color: #ccc;
	position: relative;
	border-radius: 8px;
  }
  .flex-item-on{
	background-color: #5B8849;
	color:#fff
  }
  /* 使用不同的 flex-direction 值来改变项目的排列方向 */

  /* flex-direction: row (默认值) */
  .flex-container.row {
    flex-direction: row;
  }
  .line_name{
		font-size: 18px;
		font-weight: bold;
		margin-top: 15px;
  }
  .line_bott{
	position: absolute;
	left:15%;
	width: 70%;
	bottom: 0;
	height: 24px;
	display: flex;
	justify-content: space-between;

  }
  .flex-item-on .line_bott a{
	color: #fff;
  }
  .flex-item-on .line_people{
	color:#ccc
  }
  .line_status{
	margin-top: 8px;
  }
  .line_money{
	font-weight: bold;
	font-size: 16px;
	margin-top:8px;
	height: 15px;
  }
  .line_people{
	color:#777;
	margin-top: 8px;
  }
  .content-left{
      text-align: center;
	  margin-top: 12px;
  }
  .content-left span{
      font-size: 24px;
      font-weight: bold;
  }
  .content-right{
      font-size: 14px;
      margin-top: 10px;
  }
  .card-header h2{
  	font-size: 18px;
  }

</style>
